<template>
  <div class="homePage" ref="container">
    <div class="top">
      <div>{{ userInfo?.userName }}{{greeting}}</div>
      <div class="rightFun">
        <span v-if="env == 'development'">{{env}}</span>
        <span style="margin-left: 10px;" @click="sizeToggle()">{{ isMaxSize ? "最小化" : "最大化" }}</span>
        <span style="margin-left: 10px;" @click="quit">关闭</span>
        <span style="margin-left: 10px;" @click="tray">托盘</span>
        <span style="margin-left: 10px;" @click="ball2">悬浮球</span>
      </div>
    </div>
    <div class="content">
      <div class="moduleTop">
        <div
          id="ww_83d6e0919d89e"
          class="weather"
          v='1.3'
          loc='auto'
          a='{"t":"horizontal","lang":"zh","sl_lpl":1,"ids":[],"font":"Arial","sl_ics":"one_a","sl_sot":"celsius","cl_bkg":"image","cl_font":"#FFFFFF","cl_cloud":"#FFFFFF","cl_persp":"#81D4FA","cl_sun":"#FFC107","cl_moon":"#FFC107","cl_thund":"#FF5722","el_whr":3}'
        >
          <a href="https://weatherwidget.org/zh/" id="ww_83d6e0919d89e_u" target="_blank" style="display: none">天气插件</a>
        </div>
        <div class="dateTime">
          <p class="currentDate">{{currentDate}}/{{currentWeekDay}}</p>
          <p class="currentTime">{{currentTime}}</p>
        </div>
      </div>
      <div class="moduleBody">
        <div class="moduleList">
          <div class="moduleItem" @click="screenShot">截屏</div>
          <div class="moduleItem" @click="calculator">计算器</div>
          <div class="moduleItem" @click="notOpen">桌面整理</div>
          <div class="moduleItem" @click="goOutLink">外部链接</div>
          <div class="moduleItem" @click="changeBgColor">
            <div>健康护眼</div>
            <div v-if="showColorBar" class="colorBar">
              <div
                class="colorItem"
                v-for="(item, index) in colorList"
                :key="index"
                :style="{ backgroundColor: item}"
                @click="changeColor(item)"
              />
            </div>
            <!--<div v-if="showColorBar" class="colorPicker">-->
            <!--  <span>自定义：</span>-->
            <!--  <n-color-picker-->
            <!--    v-model:value="curColor"-->
            <!--    size="small"-->
            <!--    :actions="['confirm']"-->
            <!--    @confirm="changeColor"-->
            <!--  />-->
            <!--</div>-->
          </div>
          <div class="moduleItem" @click="notOpen">快捷搜索</div>
          <div class="moduleItem" @click="notOpen">Ai办公</div>
          <div class="moduleItem" @click="notOpen">文件整理</div>
          <div class="moduleItem" @click="notOpen">定时关机</div>
          <div class="moduleItem" @click="notOpen">工具管理</div>
          <div class="moduleItem" @click="chooseFile">选择文件</div>
        </div>
        <n-divider />
        <Schedule />
        <n-button @click="dialogFn" color="#FF8300">dialog测试</n-button>
        <h1 v-if="userInfo">欢迎回来！</h1>
        <p v-if="userInfo">姓名：{{ userInfo?.userName }}</p>
        <n-button color="#FF8300" @click="goLogin" style="margin-top: 10px;">去登陆页面</n-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
import { debounce } from 'lodash-es'
import router from "@/router";
import eventBus from "@/utils/mitt.js";
import Schedule from "@/components/schedule.vue";
const userInfo = ref({})
const goLogin = () => {
  router.push('/login')
}
const dialogFn = () => {
  // window.electronAPI.send('showError', { title: '1111',content: '2222'});
  // window.electronAPI.send('openFile', { title: '1111',content: '2222'});
  // window.electronAPI.send('saveFile', {});
  window.electronAPI.send('showMessage', {
    type: 'error',
    message: '这是一条信息消息11',
  });
}
const ball2 = () => {
  // eventBus.emit('changeColor','transparent')

  window.electronAPI.send('showFloatBall', {
    width: 90,
    height: 90,
    turnIntoABall: true
  })
}
const env = ref()
env.value = process.env.NODE_ENV
const weatherLoading = ref(true)
const isMaxSize = ref(true)
const sizeToggle = () => {
  isMaxSize.value = !isMaxSize.value
  window.electronAPI.send('toggleWindow');
}
const quit = () => {
  window.electronAPI.send('quit');
}
const currentTime = ref()
const currentDate = ref()
const currentWeekDay = ref()
const updateTime = () => {
  setInterval(() => {
    const now = new Date();
    const year = now.getFullYear();
    const month = padNumber(now.getMonth() + 1);
    const day = padNumber(now.getDate());
    const days = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    currentTime.value = now.toLocaleTimeString();
    currentDate.value = `${year}-${month}-${day}`;
    currentWeekDay.value = days[now.getDay()];
  }, 1000); // 每秒更新一次
}
const padNumber = (num) => {
  return num < 10 ? '0' + num : num;
}
updateTime()
const greeting = computed(() => {
  const now = new Date();
  const hours = now.getHours();
  let state = ``;
  if (hours >= 0 && hours <= 5) {
    state = `😴 夜深人静！`;
  }else if (hours > 5 && hours <= 10) {
    state = `🌞 早上好！`;
  } else if (hours > 10 && hours <= 11) {
    state = `😀 上午好！`;
  } else if (hours > 11 && hours <= 13) {
    state = `🌕中午好！`;
  } else if (hours > 13 && hours <= 18) {
    state = `😊 下午好！`;
  } else if (hours > 18 && hours <= 22) {
    state = `🍻 晚上好！`;
  } else if (hours > 18 && hours <= 24) {
    state = `🌙 夜深人静！`;
  }
  return state;
})
const notOpen = () => {
  window.electronAPI.send('notOpen');
}
const tray = () => {
  window.electronAPI.send('goTray');
}
const screenShot = () => {
  console.log("开始截屏")
  window.electronAPI.send('screenShots');
}

const chooseFile = () => {
  window.electronAPI.invoke('chooseFile');
}
const goOutLink = () => {
  window.electronAPI.send('goLink', 'https://www.baidu.com');
}

const calculator = () => {
  window.electronAPI.send('calculator');
}

const colorList = ref([
  'rgba(0, 0, 0, 0.45)',
  'rgba(82, 190, 49, 0.41)',
  'rgba(244, 155, 155, 0.46)',
  'rgba(49, 136, 190, 0.41)',
  'rgba(190, 190, 49, 0.41)',
  'rgba(70, 49, 190, 0.51)',
  'rgba(150,49,190,0.34)',
])
const showColorBar = ref(false)

const changeBgColor = () => {
  showColorBar.value = true
}
const curColor = ref('')
const changeColor = (item) => {
  curColor.value = item
  window.electronAPI.send('changeBgColor', item)
}
const elmessage = ref('')
const sentMessage =async () => {
  elmessage.value = await window.electronAPI.postMessage()
}

onMounted(() => {
  weatherLoading.value = true
  let script = document.createElement("script")
  script.type = "text/javascript"
  script.src = "https://app3.weatherwidget.org/js/?id=ww_83d6e0919d89e"
  script.id = 'weatherId'
  document.head.appendChild(script)
  script.onload = function () {
    setTimeout(() => {
      weatherLoading.value = false
    }, 500)
  }
  userInfo.value = JSON.parse(localStorage.getItem("userInfo"))

})
onBeforeUnmount(() => {
})
</script>

<style scoped lang="scss">
.homePage {
  position: relative;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    background-color: #409eff;
    padding: 0 10px;
    border-radius: 10px 10px 0 0;
    cursor: move;
    -webkit-app-region: drag;
    .rightFun {
      span {
        cursor: pointer;
        -webkit-app-region: no-drag;
      }
    }
  }
  .content {
    .moduleTop {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .weather {

      }
      .dateTime {
        font-family: fantasy;
        flex: 1;
        text-align: center;
        word-spacing: initial;
        .currentDate {
          font-size: 24px;
        }
        .currentTime {
          font-size: 48px;
        }
      }
    }
    .moduleBody {
      padding: 0 10px;
      box-sizing: border-box;
      .moduleList {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        grid-auto-rows: 50px;
        .moduleItem {
          cursor: pointer;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          .colorBar {
            position: absolute;
            width: 100%;
            height: 15px;
            display: flex;
            border: 1px solid #eee;
            top: 35px;
            left: 50%;
            transform: translateX(-50%);
            .colorItem{
              width: 15px;
              height: 15px;
              cursor: pointer;
            }
          }
          .colorPicker {
            //display: flex;
            //align-items: center;
          }
        }
      }
    }
  }
}
</style>
